<template>
  <div>
    <el-divider content-position="center" style="background-color: #B3C0D1"><span >查询信息</span></el-divider>
    <el-row>
      <el-col :span=2>
        <el-tag>档案编号</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_id'></el-input>
      </el-col>
      <el-col :span=2>
        <el-tag>姓名</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_name'></el-input>
      </el-col>
      <el-col :span=2>
        <el-tag>身份证号</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_idNumber'></el-input>
      </el-col>
      <el-col :span=2>
        <el-tag>银行卡号</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_creditCardNumber'></el-input>
      </el-col>
      <el-col :span=3>
        <el-button type="primary" @click="queryRecords">查询</el-button>
      </el-col>
    </el-row>
    <el-divider content-position="center">发放信息</el-divider>
    <el-row>
      <el-col :span=4>
        <el-button @click="operateMultiSubsidy" type="primary">批量发放</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号" width="150"></el-table-column>
      <el-table-column prop="workerId" label="职工编号" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="idNumber" label="身份证号"></el-table-column>
      <el-table-column prop="creditCardNumbers" label="银行卡号"></el-table-column>
      <el-table-column prop="stuckReason" label="致困原因" :filters="[
        {text:'子女上学',value:'子女上学'},
        {text:'家人重病',value:'家人重病'},
        {text:'本人失业',value:'本人失业'},
        {text:'本人重病',value:'本人重病'},
        {text:'自然灾害',value:'自然灾害'}
      ]" :filter-method="filterHandler"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="operateSubsidy(scope.$index)" type="primary">发放</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>
    <el-dialog title="填写发放信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="发放金额" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认发放金额" :label-width="formLabelWidth">
          <el-input v-model="form.confirm_money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="资金年度" :label-width="formLabelWidth">
          <el-input v-model="form.year" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="资金类别" :label-width="formLabelWidth">
          <el-select v-model="form.category" placeholder="请选择资金类别" style="width: 100%">
            <el-option label="生活救助类" value="1"></el-option>
            <el-option label="医疗救助类" value="2"></el-option>
            <el-option label="子女助学类" value="3"></el-option>
            <el-option label="下岗补助类" value="4"></el-option>
            <el-option label="其他类" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitApply">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import instance from "../../../utils/request";

export default {
  name: "Query",
  data(){
    return{
      dialogFormVisible:false,
      srId:'',
      para_id:'',
      para_idNumber:'',
      para_creditCardNumber:'',
      para_name:'',
      para_money:'',
      para_money_confirm:'',
      tableData:[
      ],
      form:{
        workerIds:[],
        year:'',
        money:'',
        confirm_money:'',
        category:''
      },
      formLabelWidth: '120px',
      year:'',
      categoryId:'',
      // 默认显示第几页
      currentPage:1,
// 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:0,
// 个数选择器（可修改）
      pageSizes:[1,2,3,4,5,6],
// 默认每页显示的条数（可修改）
      PageSize:6,
      multipleSelection: [],
    }
  },
  methods:{
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    operateSubsidy(i){
      this.form.workerIds.push(parseInt(this.tableData[i].workerId));
      this.dialogFormVisible = true;
    },
    operateMultiSubsidy(){
      for(let i = 0; i< this.multipleSelection.length; i++){
        this.form.workerIds.push(this.multipleSelection[i].workerId);
      }
      this.dialogFormVisible = true;
    },
    commitApply(){
      if(this.form.money !== this.form.confirm_money){
        alert('两次输入的金额不一致！');
        this.form.money='';
        this.form.confirm_money='';
        return;
      }
      let _this = this;
      instance.post('/api/assist/assist',{
        workerId:_this.form.workerIds,
        price:_this.form.money,
        year:_this.form.year,
        categoryId:_this.form.category
      }).then(function (res) {
        if(res.data.code === 200){
          alert('提交成功！');
          _this.form.workerIds=[];
          _this.dialogFormVisible = false;
        }
        else {
          if(res.data.code === 222){
            _this.dialogFormVisible =false;
            _this.form.workerIds=[];
            alert(res.data.message);
          }
          else{
            alert('出错啦，请重试');
            _this.dialogFormVisible =false;
            _this.form.workerIds=[];
          }
        }
      }).catch(function (err) {
        console.log(err);
      });
    },
    // 分页
// 每页显示的条数
    handleSizeChange(val) {
// 改变每页显示的条数
      this.PageSize=val
// 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
// 显示第几页
    handleCurrentChange(val) {
// 改变默认的页数
      this.currentPage=val
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //聚合查询方法
    queryRecords(){
      let queryStr;
      let para_id,para_name,para_idNumber,para_creditCardNumber;
      //拼接查询字符串
      para_id = (this.para_id === '') ? '':('sId=' + this.para_id);
      para_name = (this.para_name === '') ? '' : ('sName=' + this.para_name);
      para_idNumber = (this.para_idNumber === '') ? '' : ('sIdNumber=' + this.para_idNumber);
      para_creditCardNumber = (this.para_creditCardNumber === '') ? '' : ('sCreditCardNumbers=' + this.para_creditCardNumber);
      if(this.para_id === '' && this.para_name === '' && this.para_idNumber === '' && this.para_creditCardNumber === ''){
        queryStr = '';
      }
      else {
        queryStr = '?' + para_id + '&' + para_name + '&' + para_idNumber + '&' + para_creditCardNumber;
      }
      let _this = this;
      let url = '/api/adminRecord/searchByApproved';
      instance.get(url + queryStr).then(function (res) {
        if(res.data.code === 200){
          _this.tableData = res.data.data;
          _this.totalCount = _this.tableData.length;
        }
        else{
          if(res.data.code === 218){
            alert('暂无数据');
          }
          else {
            alert('查询出错啦，请重试');
          }
        }
      }).catch(function (err) {
        console.log(err);
      })
    }
  },
  created() {
    let _this = this;
    instance.get('/api/adminRecord/searchByApproved').then(function (res) {
      _this.tableData = res.data.data;
      _this.totalCount = _this.tableData.length;
      console.log(_this.tableData);
    })
  }
}
</script>

<style scoped>
.el-divider__text.is-center {
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-color: #E9EEF3;
}
</style>
